import { broadcast_history_list } from '@/services/broadcast';
import timeToHms from '@/utils/time';
import { ActionType, PageContainer, ProTable } from '@ant-design/pro-components';
import { Button } from 'antd';
import moment from 'moment';
import { useRef, useState } from 'react';
import BroadcastInfo from './components/BroadcastInfo';
type GithubIssueItem = {
  id: string;
  action: string;
  type: string;
  name: string;
  time: string;
  zhiceng: string;
  start_time: string;
  end_time: string;
  count: string;
  lang_time: string;
  real_end_time: string;
  real_start_time: string;
};
const Broadcast_history = () => {
  const actionRef = useRef<ActionType>();
  // 控制查看直播历史模态框状态
  const [checkModal, setCheckModal] = useState(false);
  // 存储当前项的id
  const [historyId, setHistoryId] = useState<string>();
  // 控制查看直播哦历史模态框显示与隐藏
  const isShowCheckModal = (status: boolean) => {
    setCheckModal(status);
  };

  // 获取科普互动直播计划列表
  const get_broadcast_history_list = async (params: {
    pageSize?: number | undefined;
    current?: number | undefined;
    keyword?: string | undefined;
  }) => {
    //默认分页参数和后端接口字段不匹配
    let request_body = {
      ...params,
      current: params.current,
      pageSize: params.pageSize,
    };
    // console.log(params);
    const res = await broadcast_history_list(request_body);
    console.log('直播历史', res);
    return {
      data: res.data.list,
      success: true,
      total: res.data.total_count,
    };
  };
  // 直播历史
  const columns: any = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '直播类型',
      dataIndex: 'type',
      align: 'center',
      hideInSearch: true,
      valueEnum: {
        1: {
          text: '科普互动',
        },
        2: {
          text: '专业教培',
        },
      },
    },
    {
      title: '直播类型',
      dataIndex: 'type',
      hideInTable: true,
      align: 'center',
      valueType: 'select',
      valueEnum: {
        1: {
          text: '科普互动',
        },
        2: {
          text: '专业教培',
        },
      },
    },
    {
      title: '直播主题',
      dataIndex: 'name',
      align: 'center',
    },
    {
      title: '主讲医生',
      dataIndex: 'username',
      align: 'center',
    },
    {
      title: '医生职称',
      dataIndex: 'positional_name',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '直播日期',
      dataIndex: 'start_time',
      align: 'center',
      hideInSearch: true,
      render: (_: any, record: { start_time: moment.MomentInput }) => {
        return moment(record.start_time).format('YYYY-MM-DD');
      },
    },
    {
      title: '直播日期',
      dataIndex: 'start_time',
      valueType: 'dateRange',
      hideInTable: true,
      colSize: 2,
      search: {
        transform: (value: any[]) => {
          return {
            start_date: value[0],
            end_date: value[1],
          };
        },
      },
    },

    {
      title: '开始时间',
      dataIndex: 'start_time',
      hideInSearch: true,
      align: 'center',
      render: (_: any, record: { start_time: moment.MomentInput }) => {
        return moment(record.start_time).format('HH:mm:00');
      },
    },
    {
      title: '结束时间',
      dataIndex: 'end_time',
      hideInSearch: true,
      align: 'center',
      render: (_: any, record: { end_time: moment.MomentInput }) => {
        return moment(record.end_time).format('HH:mm:00');
      },
    },
    {
      title: '实际开始时间',
      dataIndex: 'real_start_time',
      hideInSearch: true,
      align: 'center',
      render: (_: any, record: { real_start_time: moment.MomentInput }) => {
        return record.real_start_time ? moment(record.real_start_time).format('HH:mm:ss') : '-';
      },
    },
    {
      title: '实际结束时间',
      dataIndex: 'real_end_time',
      hideInSearch: true,
      align: 'center',
      render: (_: any, record: { real_end_time: moment.MomentInput }) => {
        return record.real_end_time ? moment(record.real_end_time).format('HH:mm:ss') : '-';
      },
    },
    {
      title: '实际时长',
      dataIndex: 'real_total_time',
      hideInSearch: true,
      align: 'center',
      render: (_: any, record: { real_total_time: undefined }) => {
        if (record.real_total_time != undefined) {
          return timeToHms(record.real_total_time);
        } else {
          return '';
        }
      },
    },
    {
      title: '观看人数',
      dataIndex: 'audience_number',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '操作',
      hideInSearch: true,
      align: 'center',
      render: (_: any, record: any) => [
        <Button
          key="editable"
          type="link"
          onClick={() => {
            setHistoryId(record.id);
            isShowCheckModal(true);
          }}
        >
          查看
        </Button>,
      ],
    },
  ];
  return (
    <PageContainer breadcrumb={false}>
      <ProTable<GithubIssueItem>
        columns={columns}
        actionRef={actionRef}
        request={async (params = {}) => get_broadcast_history_list(params)}
        rowKey={(record) => record.id}
        search={{
          labelWidth: 'auto',
          collapseRender: false,
          collapsed: false,
          span: 4,
        }}
        options={{
          setting: {
            listsHeight: 400,
          },
        }}
        pagination={{
          pageSize: 10,
        }}
        dateFormatter="string"
        headerTitle="直播历史表"
      />
      {checkModal ? (
        <BroadcastInfo
          checkModal={checkModal}
          isShowCheckModal={isShowCheckModal}
          historyId={historyId}
        ></BroadcastInfo>
      ) : (
        ''
      )}
    </PageContainer>
  );
};
export default Broadcast_history;
